<template>
  <div class="main" id="app">
    <div class="put-questions-wrapper">
      <goBack v-show="!hideHeader"></goBack>
      <scrollerEdit ref="scrollers" lock-x>
        <div class="put-questions">
          <div class="title flex-h">
            <span class="flex1 left">提问</span>
            <span class="flex1 right" @click="quiz">提交</span>
          </div>
          <div class="questions-body">
            <span class="sub-title">
              <i>*</i>
              <b>问题描述</b>
            </span>
            <textarea v-model="texts" class="textArea" cols="30" rows="10" placeholder="详细描述您的问题,以便专家更好的解答" v-on:blur="scrolltotop"></textarea>
            <span class="lenCount">{{ texts.length }}/200</span>
            <div class="img-box">
              <span class="upImgBox" v-for="(item, index) in fileList" :key="index">
                <img class="upImg" :src="item" alt />
                <span class="delete" @click="deletes(index)"></span>
              </span>
              <span class="pics" v-show="fileList.length < 3">
                <input type="file" accept="image/*" name="file" id="file" ref="file" class="inputfile" v-on:change="changepic($event)" />
              </span>
              <span class="text" v-show="fileList.length < 3">
                <i>点击上传图片</i>
                <b>最多上传3张</b>
              </span>
            </div>
            <span class="sub-title">
              <i>*</i>
              <b>问题类型</b>
            </span>
            <div class="question-class flex-h">
              <span
                :class="tabIndex === i.id ? 'active' : ''"
                v-for="(i, index) in typeList"
                :key="index"
                @click="
                  tabIndex = i.id
                  questionClassName = i.title
                  showquestionClassName = true
                "
                >{{ i.title }}</span
              >
            </div>
            <span v-show="tabIndex || tabIndex == 0" class="classActive">{{ questionClassName }}</span>
            <div class="expert-box flex-h">
              <span @click="handleIntoExpertList" class="flex1 left">
                <b v-if="experts">@{{ experts }}</b>
                <b v-else>指定一位专家回答</b>
              </span>
              <span class="right" @click="isShowName = !isShowName">
                <b>
                  <i v-show="isShowName"></i>
                </b>
                <strong class>匿名隐私</strong>
              </span>
            </div>
            <div style="height:2rem"></div>
          </div>
        </div>
      </scrollerEdit>
    </div>

    <!-- <input
      type="file"
      accept="image/*"
      name="file"
      id="file"
      ref="file"
      class="inputfile"
      multiple
      v-on:change="changepic($event)"
    /> -->
    <!-- <div style="width:100%;height:1rem;"></div> -->
  </div>
</template>
<script>
import { upload, getQuestionTypeList, quiz } from '~/api/identity'
import scrollerEdit from '~/components/scrollerEdit'
import goBack from '~/components/goBack'
export default {
  components: {
    goBack,
    scrollerEdit,
  },
  data() {
    return {
      isShowName: false,
      experts: '',
      expertId: null,
      showquestionClassName: false,
      questionClassName: '',
      tabIndex: null,
      fileList: [],
      size: 0,
      texts: '',
      hideHeader: false,
      typeList: [{ title: '其他' }, { title: '学习提分' }, { title: '心理健康' }, { title: '大学报考' }, { title: '生涯规划' }],
    }
  },
  created() {
    if (this.commonJs.GetUrlParam('mini_token')) {
      this.hideHeader = true
    }
  },
  mounted: function() {
    this.$visit('SubmitQuestions')
    this.experts = this.$store.state.expertName
    this.expertId = this.$store.state.expertId
    this.getQuestionTypeList()
  },
  watch: {
    texts(e) {
      e.length > 200 ? (this.texts = e.substring(0, 200)) : (this.texts = e)
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path !== '/curriculum/expertList') {
        return false
      }
      let obj = JSON.parse(sessionStorage.getItem('questionList'))
      if (obj) {
        vm.texts = obj.txt
        vm.fileList = obj.imgList
        vm.tabIndex = obj.tabIndex
        vm.questionClassName = obj.questionClassName
      }
    })
  },
  beforeRouteLeave(to, from, next) {
    var _this = this
    let obj = {
      txt: this.texts,
      imgList: this.fileList,
      tabIndex: this.tabIndex,
      questionClassName: this.questionClassName,
    }
    sessionStorage.setItem('questionList', JSON.stringify(obj))
    next()
  },

  methods: {
    handleIntoExpertList() {
      if (this.commonJs.GetUrlParam('mini_token')) {
        this.$router.push({
          path: 'expertList',
          query: {
            mini_token: this.commonJs.GetUrlParam('mini_token'),
          },
        })
      } else {
        this.commonJs.gopush('expertList')
      }
    },
    scrolltotop() {
      this.$refs.scrollers.reset({ top: 0 })
      setTimeout(() => {
        if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
          return
        }

        let result = 'pc'
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
          //判断iPhone|iPad|iPod|iOS
          result = 'ios'
        } else if (/(Android)/i.test(navigator.userAgent)) {
          //判断Android
          result = 'android'
        }
        if ((result = 'ios')) {
          document.activeElement.scrollIntoViewIfNeeded(true)
        }
      }, 50)
    },
    quiz() {
      if (!this.texts) {
        this.$vux.toast.text('请输入您的问题')
        return false
      }
      if (!this.tabIndex) {
        this.$vux.toast.text('请选择问题类型')
        return false
      }
      this.$loading('open')
      let showName
      this.isShowName ? (showName = 1) : (showName = 0)
      let obj = {
        pictures: this.fileList,
        privacy: showName,
        professorId: this.expertId,
        qtid: this.tabIndex,
        title: this.texts,
      }

      const that = this

      quiz(obj)
        .then((res) => {
          if (res.code == '0') {
            sessionStorage.removeItem('questionList')
          }
          this.$hideLoading()
          this.$vux.toast.text(res.message)
          if (this.commonJs.GetUrlParam('mini_token')) {
            this.$router.replace({
              path: '../messages/myQuestion',
              query: {
                mini_token: this.commonJs.GetUrlParam('mini_token'),
              },
            })
          } else {
            this.commonJs.gosto('../messages/myQuestion')
          }
        })
        .catch((err) => {
          this.$hideLoading()
        })
    },
    getQuestionTypeList() {
      getQuestionTypeList()
        .then((res) => {
          if (res.code == '0') {
            this.typeList = res.data
          }
        })
        .catch((err) => {})
    },
    deletes(index) {
      this.fileList.splice(index, 1)
    },
    changepic(event) {
      let obj = {}
      const _that = this
      if (_that.fileList.length < 3) {
        let objUrl = ''
        for (let i = 0; i < event.target.files.length; i += 1) {
          objUrl = event.target.files[i]
          // 新建一个formData对象，通过append方法将file文件数据存入其中
          const fd = new FormData()
          fd.append('file', objUrl)
          // 获取file文件数据
          this.Loading = true
          upload(fd).then((res) => {
            if (res.code == '0') {
              _that.fileList.push(res.data.picUrlList[0])

              // _that.goodsForm['picList'].push(res.data.picUrlList[0])
              _that.Loading = false
            }
          })
        }
      } else {
        alert('最多上传三张图片！')
      }
    },
  },
}
</script>
<style lang="less" type="text/less" scoped rel="stylesheet/less">
.put-questions-wrapper {
  width: 100%;
  height: 100vh;
  background: #fff;
  .put-questions {
    width: 100%;
    height: auto;
    padding: 0 0.3rem;
    .title {
      width: 100%;
      height: 1rem;
      border-bottom: 0.01rem solid rgba(229, 232, 237, 1);
      span {
        font-size: 0.3rem;
        font-family: 'PingFangSC-Semibold', PingFangSC;
      }
      .left {
        color: #222;
      }
      .right {
        color: @mainColor;
        text-align: right;
      }
    }
    .questions-body {
      height: auto;
      padding-top: 0.1rem;
      .sub-title {
        display: block;
        i,
        b {
          font-size: 0.3rem;
        }
        i {
          color: #eb4e3f;
          margin-right: 0.05rem;
        }
      }
      .textArea {
        width: 100%;
        height: 3rem;
        outline: none;
        border: none;
        font-size: 0.3rem;
        display: block;
        margin-top: 0.2rem;
      }
      .lenCount {
        display: block;
        text-align: right;
        font-size: 0.24rem;
        color: #c7c7c7;
        margin-top: 0.2rem;
      }
      .img-box {
        width: 100%;
        height: auto;
        overflow: hidden;
        margin: 0.2rem auto;
        padding-bottom: 0.2rem;
        border-bottom: 0.01rem solid rgba(229, 232, 237, 1);

        .pics {
          display: block;
          height: 1.3rem;
          width: 1.3rem;
          background: url('~@/static/images/addimg.png') no-repeat;
          background-size: 100% 100%;
          position: relative;
          float: left;
          input {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
          }
        }
        .text {
          display: block;
          width: 2.2rem;
          height: 1.3rem;
          float: left;
          padding-left: 0.3rem;
          box-sizing: border-box;
          padding-top: 0.25rem;
          i,
          b {
            display: block;
            font-size: 0.24rem;
            line-height: 0.4rem;
          }
          b {
            color: #c7c7c7;
          }
        }
        .upImgBox {
          float: left;
          display: block;
          width: 1.3rem;
          height: 1.3rem;
          margin-right: 0.2rem;
          position: relative;
          img {
            display: block;
            height: 1.3rem;
            width: 1.3rem;
            margin: 0 auto;
          }
          .delete {
            display: inline-block;
            position: absolute;
            font-size: 0.3rem;
            right: -0rem;
            top: -0rem;
            width: 0.4rem;
            height: 0.4rem;
            background: url('~@/static/sprite/other_sprites.png') -0.7rem -3.18rem;
            background-size: 4.68rem 4.08rem;
          }
        }
      }
      .question-class {
        flex-wrap: wrap;
        justify-content: space-between;
        padding-top: 0.2rem;
        //  align-content: space-between;
        span {
          width: 1.6rem;
          height: 0.6rem;
          margin-bottom: 0.2rem;
          border: 1px solid #b3b3b3;
          text-align: center;
          line-height: 0.6rem;
          font-size: 0.3rem;
          color: #b3b3b3;
          border-radius: 0.1rem;
        }
        .active {
          border: 1px solid @mainColor;
          color: @mainColor;
        }
      }
      .classActive {
        display: block;
        height: 0.6rem;
        font-size: 0.3rem;
        padding-left: 0.2rem;
        box-sizing: border-box;
        color: #b3b3b3;
        background: #f8f8f8;
      }
      .expert-box {
        width: 100%;
        height: auto;
        padding-top: 0.2rem;
        margin-top: 0.2rem;
        border-top: 0.01rem solid rgba(229, 232, 237, 1);
        .left {
          b {
            display: inline-block;
            padding: 0.1rem 0.2rem;
            background: #f8f8f8;
            font-size: 0.26rem;
            border-radius: 0.1rem;
            color: #b3b3b3;
          }
        }
        .right {
          b {
            display: inline-block;
            width: 0.3rem;
            height: 0.3rem;
            border: 0.01rem solid #eaeaea;
            border-radius: 2px;
            vertical-align: middle;
            i {
              display: block;
              width: 0.2rem;
              height: 0.2rem;
              margin: 0.04rem auto;
              background: @mainColor;
            }
          }
          strong {
            font-size: 0.26rem;
            vertical-align: middle;
            margin-left: 0.1rem;
          }
        }
      }
    }
  }
}
</style>
